<script setup lang="jsx">
import { computed, reactive, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import { DeleteOutlined, DownloadOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import useResetTableRef from '@/hooks/common/resetTableRef';
import useSearchData from '@/hooks/common/searchData';
import { vcpget, vcppost } from '@/service/api/modules/erp';

const [searchParams, resetSearchParams] = useResetTableRef({
  moduleNo: null,
  state: null,
  time: null
});
const tableRef = ref(null);
const searchData = useSearchData(searchParams);

const searchFormList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '料号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    placeholder: '请输入料号',
    showTime: true
  },
  // {
  //   type: 'select',
  //   key: 'state',
  //   selectOptions: [
  //     {
  //       label: '选项一',
  //       value: '1'
  //     },
  //     {
  //       label: '选项二',
  //       value: '2'
  //     }
  //   ],
  //   label: '料号',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 8,
  //   xxl: 6,
  //   placeholder: '请输入料号',
  //   showTime: true
  // },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true // 显示时分秒选择
  }
];

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const columns = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '状态',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'mktAllowed',
    dataIndex: 'mktAllowed',
    title: 'mkt可投产',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'allowed',
    dataIndex: 'allowed',
    title: '可投产',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'takeMaterials',
    dataIndex: 'takeMaterials',
    title: '可领料',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'consignment',
    dataIndex: 'consignment',
    title: '寄售',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'quotationOrderNo',
    dataIndex: 'quotationOrderNo',
    title: '报价单号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerCode',
    dataIndex: 'customerCode',
    title: '客户编码',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerName',
    dataIndex: 'customerName',
    title: '客户名称',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'terminalCustomer',
    dataIndex: 'terminalCustomer',
    title: '终端客户',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'company',
    dataIndex: 'company',
    title: '公司主体',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'factory',
    dataIndex: 'factory',
    title: '生产厂区',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'layer',
    dataIndex: 'layer',
    title: '层数',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '生产型号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerModel',
    dataIndex: 'customerModel',
    title: '客户型号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'materialNo',
    dataIndex: 'materialNo',
    title: '物料号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'terminalModel',
    dataIndex: 'terminalModel',
    title: '终端型号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'terminalVersion',
    dataIndex: 'terminalVersion',
    title: '终端版本',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sowFile',
    dataIndex: 'sowFile',
    title: 'sow文件',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'otherAdditions',
    dataIndex: 'otherAdditions',
    title: '其他附加',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ptlNum',
    dataIndex: 'ptlNum',
    title: 'ptl数量',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ptlRemark',
    dataIndex: 'ptlRemark',
    title: 'ptl备注',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ptlSquareMetre',
    dataIndex: 'ptlSquareMetre',
    title: 'ptl平米',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'modelType',
    dataIndex: 'modelType',
    title: '型号类型',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productType',
    dataIndex: 'productType',
    title: '产品类型',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'surfaceTreatment',
    dataIndex: 'surfaceTreatment',
    title: '表面处理',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'surfaceTreatment1',
    dataIndex: 'surfaceTreatment1',
    title: '表面处理1',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'surfaceTreatment2',
    dataIndex: 'surfaceTreatment2',
    title: '表面处理2',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'specialProcess',
    dataIndex: 'specialProcess',
    title: '特殊工艺',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '单位',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerShipUnit',
    dataIndex: 'customerShipUnit',
    title: '客户出货单位',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unitWeight',
    dataIndex: 'unitWeight',
    title: '单重',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unitArea',
    dataIndex: 'unitArea',
    title: '单元面积',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'commonModel',
    dataIndex: 'commonModel',
    title: '共同型号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'plateThickness',
    dataIndex: 'plateThickness',
    title: '板厚',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'plateMaterial',
    dataIndex: 'plateMaterial',
    title: '板材',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'tg',
    dataIndex: 'tg',
    title: 'tg',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'cti',
    dataIndex: 'cti',
    title: 'cti',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'environmental',
    dataIndex: 'environmental',
    title: '环保料',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'setToPcs',
    dataIndex: 'setToPcs',
    title: '1set=?pcs',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerPanelAssembly',
    dataIndex: 'customerPanelAssembly',
    title: '客户拼板',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'setL',
    dataIndex: 'setL',
    title: 'set长',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'setW',
    dataIndex: 'setW',
    title: 'set宽',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sampleApprovalTime',
    dataIndex: 'sampleApprovalTime',
    title: '样板承认时间',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'massProductionTime',
    dataIndex: 'massProductionTime',
    title: '量产时间',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'hdi',
    dataIndex: 'hdi',
    title: 'hdi',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'hdiStructure',
    dataIndex: 'hdiStructure',
    title: 'hdi结构',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'mechanicalBlindHole',
    dataIndex: 'mechanicalBlindHole',
    title: '机械盲孔',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'flexibleBoard',
    dataIndex: 'flexibleBoard',
    title: '软板',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productFeatures',
    dataIndex: 'productFeatures',
    title: '产品特征',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'wb',
    dataIndex: 'wb',
    title: 'WB',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'safetyClimbManagement',
    dataIndex: 'safetyClimbManagement',
    title: '安全爬坡管理',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'safetyComponent',
    dataIndex: 'safetyComponent',
    title: '安全件',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'rpoth',
    dataIndex: 'rpoth',
    title: '通孔塞树脂',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'scheduledScrapping',
    dataIndex: 'scheduledScrapping',
    title: '预定报废',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建者',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建日期',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '最后修改日期',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
const formList = [
  {
    type: 'input',
    key: 'state',
    label: '状态',
    placeholder: '请选择状态',
    span: 8
  },
  {
    type: 'input',
    key: 'mktAllowed',
    label: 'mkt可投产',
    placeholder: '请选择是否mkt可投产',
    span: 8
  },
  {
    type: 'input',
    key: 'allowed',
    label: '可投产',
    placeholder: '请选择是否可投产',
    span: 8
  },
  {
    type: 'input',
    key: 'takeMaterials',
    label: '可领料',
    placeholder: '请选择是否可领料',
    span: 8
  },
  {
    type: 'input',
    key: 'consignment',
    label: '寄售',
    placeholder: '请输入寄售',
    span: 8
  },
  {
    type: 'input',
    key: 'quotationOrderNo',
    label: '报价单号',
    placeholder: '请输入报价单号',
    span: 8
  },
  {
    type: 'input',
    key: 'customerCode',
    label: '客户编码',
    placeholder: '请输入客户编码',
    span: 8
  },
  {
    type: 'input',
    key: 'customerName',
    label: '客户名称',
    placeholder: '请输入客户名称',
    span: 8
  },
  {
    type: 'input',
    key: 'terminalCustomer',
    label: '终端客户',
    placeholder: '请输入终端客户',
    span: 8
  },
  {
    type: 'input',
    key: 'company',
    label: '公司主体',
    placeholder: '请输入公司主体',
    span: 8
  },
  {
    type: 'input',
    key: 'factory',
    label: '生产厂区',
    placeholder: '请输入生产厂区',
    span: 8
  },
  {
    type: 'input',
    key: 'layer',
    label: '层数',
    placeholder: '请输入层数',
    span: 8
  },
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 8
  },
  {
    type: 'input',
    key: 'customerModel',
    label: '客户型号',
    placeholder: '请输入客户型号',
    span: 8
  },
  {
    type: 'input',
    key: 'materialNo',
    label: '物料号',
    placeholder: '请输入物料号',
    span: 8
  },
  {
    type: 'input',
    key: 'terminalModel',
    label: '终端型号',
    placeholder: '请输入终端型号',
    span: 8
  },
  {
    type: 'input',
    key: 'terminalVersion',
    label: '终端版本',
    placeholder: '请输入终端版本',
    span: 8
  },
  {
    type: 'input',
    key: 'sowFile',
    label: 'sow文件',
    placeholder: '请输入sow文件',
    span: 8
  },
  {
    type: 'input',
    key: 'otherAdditions',
    label: '其他附加',
    placeholder: '请输入其他附加',
    span: 8
  },
  {
    type: 'input',
    key: 'ptlNum',
    label: 'ptl数量',
    placeholder: '请输入ptl数量',
    span: 8
  },
  {
    type: 'input',
    key: 'ptlRemark',
    label: 'ptl备注',
    placeholder: '请输入ptl备注',
    span: 8
  },
  {
    type: 'input',
    key: 'ptlSquareMetre',
    label: 'ptl平米',
    placeholder: '请输入ptl平米',
    span: 8
  },
  {
    type: 'input',
    key: 'modelType',
    label: '型号类型',
    placeholder: '请输入型号类型',
    span: 8
  },
  {
    type: 'input',
    key: 'productType',
    label: '产品类型',
    placeholder: '请输入产品类型',
    span: 8
  },
  {
    type: 'input',
    key: 'surfaceTreatment',
    label: '表面处理',
    placeholder: '请输入表面处理',
    span: 8
  },
  {
    type: 'input',
    key: 'surfaceTreatment1',
    label: '表面处理1',
    placeholder: '请输入表面处理1',
    span: 8
  },
  {
    type: 'input',
    key: 'surfaceTreatment2',
    label: '表面处理2',
    placeholder: '请输入表面处理2',
    span: 8
  },
  {
    type: 'input',
    key: 'specialProcess',
    label: '特殊工艺',
    placeholder: '请输入特殊工艺',
    span: 8
  },
  {
    type: 'input',
    key: 'unit',
    label: '单位',
    placeholder: '请输入单位',
    span: 8
  },
  {
    type: 'input',
    key: 'customerShipUnit',
    label: '客户出货单位',
    placeholder: '请输入客户出货单位',
    span: 8
  },
  {
    type: 'input',
    key: 'unitWeight',
    label: '单重',
    placeholder: '请输入单重',
    span: 8
  },
  {
    type: 'input',
    key: 'unitArea',
    label: '单元面积',
    placeholder: '请输入单元面积',
    span: 8
  },
  {
    type: 'input',
    key: 'commonModel',
    label: '共同型号',
    placeholder: '请输入共同型号',
    span: 8
  },
  {
    type: 'input',
    key: 'plateThickness',
    label: '板厚',
    placeholder: '请输入板厚',
    span: 8
  },
  {
    type: 'input',
    key: 'plateMaterial',
    label: '板材',
    placeholder: '请输入板材',
    span: 8
  },
  {
    type: 'input',
    key: 'tg',
    label: 'tg',
    placeholder: '请输入tg',
    span: 8
  },
  {
    type: 'input',
    key: 'cti',
    label: 'cti',
    placeholder: '请输入cti',
    span: 8
  },
  {
    type: 'input',
    key: 'environmental',
    label: '环保料',
    placeholder: '请输入环保料',
    span: 8
  },
  {
    type: 'input',
    key: 'setToPcs',
    label: '1set=?pcs',
    placeholder: '请输入1set=?pcs',
    span: 8
  },
  {
    type: 'input',
    key: 'customerPanelAssembly',
    label: '客户拼板',
    placeholder: '请输入客户拼板',
    span: 8
  },
  {
    type: 'input',
    key: 'setL',
    label: 'set长',
    placeholder: '请输入set长',
    span: 8
  },
  {
    type: 'input',
    key: 'setW',
    label: 'set宽',
    placeholder: '请输入set宽',
    span: 8
  },
  {
    type: 'input',
    key: 'sampleApprovalTime',
    label: '样板承认时间',
    placeholder: '请输入样板承认时间',
    span: 8
  },
  {
    type: 'input',
    key: 'massProductionTime',
    label: '量产时间',
    placeholder: '请输入量产时间',
    span: 8
  },
  {
    type: 'input',
    key: 'hdi',
    label: 'hdi',
    placeholder: '请输入hdi',
    span: 8
  },
  {
    type: 'input',
    key: 'hdiStructure',
    label: 'hdi结构',
    placeholder: '请输入hdi结构',
    span: 8
  },
  {
    type: 'input',
    key: 'mechanicalBlindHole',
    label: '机械盲孔',
    placeholder: '请输入机械盲孔',
    span: 8
  },
  {
    type: 'input',
    key: 'flexibleBoard',
    label: '软板',
    placeholder: '请输入软板',
    span: 8
  },
  {
    type: 'input',
    key: 'productFeatures',
    label: '产品特征',
    placeholder: '请输入产品特征',
    span: 8
  },
  {
    type: 'input',
    key: 'wb',
    label: 'WB',
    placeholder: '请输入WB',
    span: 8
  },
  {
    type: 'input',
    key: 'safetyClimbManagement',
    label: '安全爬坡管理',
    placeholder: '请输入安全爬坡管理',
    span: 8
  },
  {
    type: 'input',
    key: 'safetyComponent',
    label: '安全件',
    placeholder: '请输入安全件',
    span: 8
  },
  {
    type: 'input',
    key: 'rpoth',
    label: '通孔塞树脂',
    placeholder: '请输入通孔塞树脂',
    span: 8
  },
  {
    type: 'input',
    key: 'scheduledScrapping',
    label: '预定报废',
    placeholder: '请输入预定报废',
    span: 8
  },
  {
    type: 'input',
    key: 'remark',
    label: '备注',
    placeholder: '请输入备注',
    span: 8
  },
  {
    type: 'input',
    key: 'createBy',
    label: '创建者',
    placeholder: '请输入创建者',
    span: 8
  }
];
const selectedRowKeys = ref([]);
const detailsVisible = ref(false);

const upDatas = ref('');
const addDatas = ref('');
const titles = ref('');
function updata() {
  if (selectedRowKeys.value.length != 1) {
    return window.$message?.error('请先选择一条数据');
  }

  titles.value = '型号定义修改';
  upDatas.value = tableRef.value.tableData.find(person => selectedRowKeys.value[0].prodId == person.prodId);
  detailsVisible.value = true;
}
function addData() {
  titles.value = '型号定义新增';
  addDatas.value = {};
  detailsVisible.value = true;
}

function getUpdata() {
  vcppost('/jlerp/prodInfo/update', upDatas.value).then(({ data, error }) => {
    if (!error) {
      detailsVisible.value = false;
      upDatas.value = '';
      window.$message?.success('修改成功');
      selectedRowKeys.value = [];
      tableRef.value.getData();
    }
  });
}
function getAddData() {
  vcppost('/jlerp/prodInfo/add', addDatas.value).then(({ data, error }) => {
    if (!error) {
      detailsVisible.value = false;
      addDatas.value = '';
      window.$message?.success('新增成功');
      selectedRowKeys.value = [];
      tableRef.value.getData();
    }
  });
}

function deleteData() {
  if (selectedRowKeys.value.length == 0) {
    return window.$message?.error('请先选择一条数据');
  }
  window.$modal?.confirm({
    title: `是否确认删除数据?`,
    onOk: () => {
      // const selectData = tableRef.value.tableData.filter(item => selectedRowKeys.value.includes(item.prodId));
      const selectData = selectedRowKeys.value;
      vcppost('/jlerp/prodInfo/delete', selectData).then(({ data, error }) => {
        if (!error) {
          // const selectData = tableRef.value.tableData.filter(item => selectedRowKeys.value.includes(item.prodId));

          // pulseWaveformSelectiondeleteBatch(selectData).then(({ data, error }) => {
          //   if (!error) {
          selectedRowKeys.value = [];
          tableRef.value.getData();
          //   }
          // });

          window.$message?.success('删除成功!');
        } else {
          window.$message?.error('删除失败!');
        }
      });
    },
    onCancel: () => {}
  });
}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  resetSearchParams();
  search();
}

function handleSelectChange(val) {
  

  selectedRowKeys.value = val;
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <!-- <Search v-model:model="searchParams" @reset="search()" @search="search()" /> -->
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="columns"
      :show-row-selection="true"
      :auto-generate-uuid="true"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/jlerp/prodInfo/findAll"
      @table-select-change="handleSelectChange"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="addData">
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="updata">
          <template #icon>
            <EditOutlined class="align-sub" />
          </template>
          修改
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="deleteData">
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>
      </template>
    </Table>

    <!--
 <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="addData">
          <span class="ml-3px">新增</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="updata">
          <span class="ml-3px">修改</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="deleteData">
          <span class="ml-3px">删除</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: tableSelectChange
        }"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="prodId"
        :custom-row="customRow"
        :default-expand-all-rows="true"
        :scroll="{ y: 'auto' }"
        :pagination="pagination"
        class="has-footer-table h-full"
        :row-height="23"
      ></STable>
    </ACard>
-->

    <Modal
      v-model:visible="detailsVisible"
      :destroy-on-close="true"
      :centered="true"
      :title="titles"
      width="1050px"
      height="550px"
    >
      <div v-if="titles == '型号定义修改'" class="event-form">
        <Form v-model:model="upDatas" :form-list="formList"></Form>
      </div>
      <div v-else class="event-form">
        <Form v-model:model="addDatas" :form-list="formList"></Form>
      </div>
      <template #footer>
        <div class="modal-footer">
          <AButton @click="detailsVisible = false">关闭</AButton>
          <AButton v-if="titles == '型号定义修改'" @click="getUpdata">保存</AButton>
          <AButton v-else @click="getAddData">保存</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.row-red-background {
  background-color: rgba(244, 56, 56, 0.7) !important; /* !important 可能需要以确保覆盖其他样式 */
}
.expired {
  color: red;
  font-weight: bold;
  font-size: larger;
}

:deep(.surely-table-wrapper) {
  &.has-footer-table {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .surely-table {
          height: calc(100% - 40px - v-bind('footerHeight')) !important;
        }
      }
    }
  }
}
</style>
